import React, { useState, useEffect } from 'react';
import { ConnectRC, connect, history } from 'umi';
import { ConnectState } from '@/models/connect';
import { ProjectModelState } from '@/models/modules/project';
import { Descriptions } from 'antd';
import moment from 'moment';

import { getProjectBranches } from '@/service/gitLab';

import styles from './index.less';

interface ProjectProps {
    index: ProjectModelState;
}

const BranchesPage: ConnectRC<ProjectProps> = (props) => {
    const [branchesList, setBranchesList] = useState<any>([]);

    const { index, history } = props;

    useEffect(() => {
        // 获取分支信息
        let param: any = {
            id: history.location?.query.id
        }
        getProjectBranches(param).then((res) => {
            setBranchesList(res)
        });
    }, []);


    return (
        <div className={styles.branches_layout}>
            <div className={styles.layout_title}>分支总数：{branchesList && branchesList?.length}</div>
            {branchesList && branchesList?.map((item: any, index: number) => {
                return (
                    <div key={index} className={styles.layout_card}>
                        <Descriptions title={`${item.name}分支信息`} bordered>
                            <Descriptions.Item label="分支名称" span={3}>{item.name}</Descriptions.Item>
                            <Descriptions.Item label="是否被保护">{item.protected ? '已保护' : '未保护'}</Descriptions.Item>
                            <Descriptions.Item label="developers-提交权限">{item.developers_can_push ? '拥有' : '禁止'}</Descriptions.Item>
                            <Descriptions.Item label="developers-合并权限" >
                                {item.developers_can_merge ? '拥有' : '禁止'}
                            </Descriptions.Item>
                            <Descriptions.Item label="最后一次提交信息" >
                                <div>标题： {item.commit?.title}</div>
                                <div>说明： {item.commit?.message}</div>
                                <div>提交者： {item.commit?.committer_name}</div>
                                <div>提交者邮箱： {item.commit?.committer_email}</div>
                                <div>提交时间： {moment(item.commit?.committed_date).format('YYYY-MM-DD HH:mm:ss')}</div>
                                <div>链接： <a href={item.commit?.web_url} target="_blank">{item.commit?.web_url}</a></div>
                            </Descriptions.Item>
                        </Descriptions>
                    </div>
                )
            })}


        </div >
    );
};

export default connect(({ index }: ConnectState) => ({
    index,
}))(BranchesPage);
